<template>
  <div class="MonthIncome">
    <List
      :linklist="linklist"
      :tableData="tableData"
      :btnList="btnList"
      :titleList="titleList"
      :isCheck="isCheck"
      :selWidth="selWidth"
      @moneyrefresh="getData"
    ></List>

    <!-- 统计 -->
    <Collect :tableData="tableData" :collect="collect" :money="money" />
    <TotalCount :col="col" :mon="mon" ::tableData="tableData" />
    <!-- 页码 -->
    <Paging
      :class="pg"
      :total="totalSize"
      @getLimit="getLimit"
      @getPage="getPage"
    />
  </div>
</template>

<script>
import List from "../../components/List.vue";
import Paging from "../../components/Paging.vue";
import Collect from "../../components/collect.vue";
import TotalCount from "../../components/TotalCount.vue";
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  name: "MonthIncome",
  components: {
    List,
    Paging,
    Collect,
    TotalCount,
  },
  computed: {
    ...mapState("moneyStore", [
      "linklist",
      "btnList",
      "titleList",
      "tableData",
      "selWidth",
    ]),
    ...mapMutations("moneyStore", ["setfootState"]),
  },
  data() {
    return {
      pg: "page",
      currentPage: 1, //当前页
      pageSize: 3, //页数
      totalSize: 0, // 总共有多少条数据
      // 代表前面是否有复选框
      isCheck: false,
      collect: [
        {
          id: 2,
          name: "本月 已审核结余统计",
        },
        {
          id: 3,
          name: "总收入",
        },
        {
          id: 4,
          name: "总支出",
        },
      ],
      money: [],
      mon: [],
      col: [
        {
          id: 2,
          name: "本月 所有（含已审核+未审核）结余统计",
        },
        {
          id: 3,
          name: "总收入",
        },
        {
          id: 4,
          name: "总支出",
        },
      ],
    };
  },
  created() {
    this.getData();
  },
  watch: {
    tableData: {
      handler(newVlaue) {
        //handler有两个参数，新的数据，和旧的数据
        console.log("tableData被修改了", newVlaue);
        this.compute();
      },
    },
  },
  methods: {
    ...mapActions("moneyStore", ["getMonthIncomeData"]),
    // 得到当前页的值
    getPage(val) {
      this.currentPage = val;
      this.getData(); // 重新发起请求，更新当前值
    },
    // 得到一页有多少条数据
    getLimit(val) {
      this.pageSize = val;
      this.getData();
    },
    getData() {
      this.getMonthIncomeData({
        currentPage: this.currentPage,
        currentLimit: this.pageSize,
      })
        .then((res) => {
          this.totalSize = res;
          this.compute();
        })
        .catch((err) => {
          console.log("查询失败：", err);
        });
    },
    // 计算数据
    compute() {
      this.money = [];
      this.mon = [];
      var leftCount = 0;
      var countin = 0;
      var countout = 0;
      var totalcount = 0,
        totalin = 0,
        totalout = 0;
      let arr = this.tableData;
      console.log("this.$store.state.tableData", this.tableData);
      for (var a = 0; a < arr.length; a++) {
        // a 代表已审核收入，b 代表已审核支出
        let a1 = 0,
          b1 = 0;
        // 已审核总收入
        if (arr[a].inoutcome == "收入" && arr[a].check == "已审核") {
          countin += arr[a].inoutmoney;
        }
        // 已审核总支出
        if (arr[a].inoutcome == "支出" && arr[a].check == "已审核") {
          countout += arr[a].inoutmoney;
        }
        // 已审核结余统计
        if (arr[a].check == "已审核" && arr[a].inoutcome == "收入") {
          a1 += arr[a].inoutmoney;
        }
        if (arr[a].check == "已审核" && arr[a].inoutcome == "支出") {
          b1 += arr[a].inoutmoney;
        }
        // 总收入
        if (arr[a].inoutcome == "收入") {
          totalin += arr[a].inoutmoney;
        }
        // 总支出
        if (arr[a].inoutcome == "支出") {
          totalout += arr[a].inoutmoney;
        }
        leftCount = leftCount + (a1 - b1);
      }
      totalcount = totalin - totalout;
      totalout = Math.round(totalout * 100) / 100;
      totalin = Math.round(totalin * 100) / 100;
      totalcount = Math.round(totalcount * 100) / 100;
      countin = Math.round(countin * 100) / 100;
      countout = Math.round(countout * 100) / 100;
      leftCount = Math.round(leftCount * 100) / 100;
      this.money.push(leftCount);
      this.money.push(countin);
      this.money.push(countout);
      this.mon.push(totalcount);
      this.mon.push(totalin);
      this.mon.push(totalout);
    },
  },
};
</script>

<style>
</style>